<template>
  <div class="view">
    <van-nav-bar
      title="我的余额"
      left-arrow
      @click-left="$router.push('/replace')"
    />
    <div class="my_balabce">
      <span>我的余额</span>
      <span>{{ show.balance }}</span>
      <span class="tixian" @click="txian">提现</span>
    </div>
    <van-dropdown-menu>
      <van-dropdown-item v-model="action.curYear" :options="show.yearList" @change='changeCurYear' />
      <van-dropdown-item v-model="action.curMonth" :options="show.monthList" @change='changeCurMonth' />
    </van-dropdown-menu>
    <van-list
      v-model="action.loading"
      :finished="action.finished"
      :round="true"
      finished-text="没有更多了"
      class="detail_info"
      @load="onLoad"
    >
      <div class="item" v-for="(item, index) in show.dataListAll._list" :key="index">
        <van-cell :title="item.orders_order_number">
          <template #label>
            <p class="needwp">
              {{ item.remark }}
            </p>
          </template>
          <template #default>
            <span
              :class="
                item.wi
                  ? 'red'
                  : item.type == 1
                  ? 'blue'
                  : item.type == 2
                  ? 'red'
                  : ''
              "
            >
              {{
                item.wi
                  ? "提现-" + item.money
                  : item.type == 1
                  ? "订单收益+" + item.money
                  : item.type == 2
                  ? "订单超时-" + item.money
                  : ""
              }}
            </span>
            <p>{{ item.addTime }}</p>
          </template>
        </van-cell>
      </div>
    </van-list>
  </div>
</template>
<script>
import { Dialog, Toast } from "vant";
import { getTimes } from "@u/getTimes.js";
import { get } from "../../../../public/API/query";

export default {
  data() {
    return {
      action:{
        curMonth:'',
        curYear:'',
        curPage:1,
        finished:false,
        loading:false,
      },
      online:{},
      post:{
        year:'',
        month:'',
        p:'',
        limit:''
      },
      show:{
        monthList:[1,2,3,4,5,6,7,8,9,10,11,12],
        yearList:[],
        dataListAll:'',
        dataList:{_list:[]},
        balance:'',
      }
    };
  },
  methods: {
    changeCurYear(value){
      this.action.curYear = value
      this.getWallet()
    },
    changeCurMonth(value){
      this.action.curMonth = value
      this.getWallet()
    },
    onLoad() {
      this.getWallet()
      if(!this.show.dataList._list){
        this.action,curPage++
        this.show.dataList._list = this.show.dataListAll._list.slice(0,10*this.action,curPage)
      }
        this.action.loading = false;
    },
    getWallet() {
      let curMonth = this.action.curMonth
      if(curMonth.toString().length === 1){
        curMonth = '0' + curMonth
      }
      this.post = {
      p: 1,
      limit: 100,
      year: this.action.curYear,
      month: curMonth,
    };
      get("moneyBagList", this.post, (res) => {
        if (res.code === 200) {
          this.show.dataListAll = res.data
          this.show.dataList._list = this.show.dataListAll._list.slice(0,9)
          console.log(res.data);
          this.show.balance = res.data.errands_info.financeJson.balance
        }
      });
    },
    txian() {
      if (this.smrz) { 
        this.$router.push("/replace/balance")
      } else {
        Dialog.alert({
          title: "提示",
          message: `请先进行实名认证`,
        }).then(() => {
          this.$router.push("/authentication");
        });
      }
    },
  },
  created(){
    //初始化时间
    this.action.curYear = new Date().getFullYear();
    this.action.curMonth = new Date().getMonth()+1;
    for(let i=0; i<this.show.monthList.length; i++){
      this.show.monthList[i] = {
        text: this.show.monthList[i]+"月",
        value:  i+1
      }
    }
     this.show.yearList.push({
        text: this.action.curYear+'年',
        value: this.action.curYear
      },{
        text: (this.action.curYear-1)+'年',
        value: (this.action.curYear-1)
      }) 
    //  初始化获取当前年月的数据
    let curMonth = this.action.curMonth
      if(curMonth.toString().length === 1){
        curMonth = '0' + curMonth
      }
    this.post = {
      p:  1,
      limit: 100,
      year: this.action.curYear,
      month: curMonth,
    };
    get("moneyBagList", this.post, (res) => {
      if (res.code === 200) {
          this.action.finished = true;
          this.show.dataListAll = res.data
          this.show.dataList._list = this.show.dataListAll._list.slice(0,9)
          this.show.balance = res.data.errands_info.financeJson.balance
      }
    });
  },
  deactivated() {
    this.$destroy(true); //销毁组件
  },
};
</script>
<style lang="less" scoped>
.my_balabce {
  background: linear-gradient(134deg, #2d7bff 0%, #003d8d 100%);
  width: 80%;
  height: 75px;
  margin: auto;
  border-radius: 7px;
  padding: 0 23.5px;
  margin-top: 10px;
  span {
    line-height: 75px;
  }
  span:nth-child(1) {
    font-size: 14px;
    font-family: PingFang-SC-Regular, PingFang-SC;
    font-weight: 400;
    color: #ffffff;
    margin-right: 10px;
  }
  span:nth-child(2) {
    font-size: 20px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #ffffff;
  }
  span:nth-child(3) {
    float: right;
    line-height: 28px;
    width: 73px;
    height: 28px;
    border: 1px solid #fff;
    margin-top: 23px;
    text-align: center;
    font-size: 14px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #ffffff;
    border-radius: 14px;
  }
}
</style>
